/*
 * @Author: your name
 * @Date: 2022-04-07 19:40:28
 * @LastEditTime: 2022-04-07 20:23:34
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \erp-management-system\src\views\finance\table\addState\deleteOption.jsx
 */
import React, { useState } from 'react';
import { Modal, Button, Table, Form, Input } from 'antd';
import { EditFilled, DeleteFilled } from '@ant-design/icons';
import './deleteoption.css'
const Deleteoption = (props) => {
    console.log(props);
    const { incomeTypeList } = props
    //控制模态框
    const [isModalVisible, setIsModalVisible] = useState(false);
    //表格数据
    const [dataSource, setdataSource] = useState(incomeTypeList);
    //模态框
    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    //表单
    const onFinish = (values) => {
        console.log('Success:', values);
    };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    //添加参数
    const addParam = () => {

    }

    const columns = [
        {
            title: '类型',
            dataIndex: 'name',
            key: 'name',
            render: name => {
                return <>{name}</>

            }
        },
        {
            title: '管理',
            key: 'mananger',
            render: data => {
                for (let key in data) {
                    return <>
                        <EditFilled className='modfiy-formoutlined'/> <DeleteFilled className='modfiy-deleteOutlined'/>
                    </>
                }
            }


        },
    ];

    return (
        <>
            <Button type="primary" onClick={showModal} danger className='btn-delvalue'>
                删除自定义选项值
            </Button>
            <Modal title="删除自定义选项值" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                <Form
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        label="参数"
                        name="parameter"
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="parameter"
                    >
                        <Button type="primary" onClick={addParam}>
                            添加
                        </Button>
                    </Form.Item>
                </Form>

                <Table 
                dataSource={dataSource} 
                columns={columns} 
                rowKey={record => record.id} 
                />;
            </Modal>
        </>
    );
}

export default Deleteoption;
